:root {
      --main-color: #c56cf0;
      --danger-color: #ff4757;
      --erreur-color: #5a3c3f8c;
  }

  #hero-container {
      position: relative;
      width: 64px;
      height: 64px;
      margin: 10px auto;
      transform: scale(2.5);
      /* Agrandit le perso pour qu'il soit visible */
      image-rendering: pixelated;
      /* Garde l'aspect pixel art net */
      overflow: hidden;
  }

  .hero-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 64px;
      height: 64px;
      background-repeat: no-repeat;
      background-size: 832px 1344px;
      animation: walk-down 1s steps(9) infinite;
  }

  .hero-layer.hidden {
      display: block !important;
      visibility: hidden;
  }


  /* Définition des mouvements pour la marche à droite */
  @keyframes walk-right {
      from {
          background-position-x: 0;
      }

      to {
          background-position-x: -576px;
      }

      /* 9 étapes de 64px */
  }

  .hero-layer.anim-right {
      /* La ligne 11 correspond souvent à la droite dans les sprites LPC (11 * 64px = 704px) */
      background-position-y: -704px !important;
      animation: walk-right 1s steps(9) infinite !important;
  }

  #hero-bilan {
      position: relative;
      width: 64px;
      height: 64px;
      margin: 0; /* Pas de marge de centrage */
      transform: scale(2);
      image-rendering: pixelated;
      overflow: hidden;
      z-index: 100;
  }

  #hero-bilan-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 128px;
      height: 128px;
      flex-shrink: 0;
  }

  .fin-header-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 30px;
      margin-bottom: 15px;
      width: 100%;
      flex-shrink: 0;
  }

  .fin-text-container {
      text-align: left;
      flex-grow: 1;
  }

  /* Corps de base (Teinte claire) */
  .body {
      background-image: url('img/body.png');
  }

  /* ÉQUIPEMENT SIMPLE (Entiers) */
  .armor-torso {
      background-image: url('img/chest_male.png');
  }

  .armor-legs {
      background-image: url('img/white_pants_male.png');
  }

  .weapon {
      background-image: url('img/longsword_alt.png');
  }

  .feet {
      background-image: url('img/brown_shoes_male.png');
  }

  /* ÉQUIPEMENT AVANCÉ (Décimaux) */
  .head {
      background-image: url('img/metal_helmet_male.png');
  }

  .cape {
      background-image: url('img/cape_white.png');
      z-index: -1;
  }

  .weapon-glow {
      background-image: url('img/steel.png');
  }

  .shield {
      background-image: url('img/spartan.png');
  }

  /* ÉQUIPEMENT LÉGENDAIRE (Puissances) */
  .armor-diadem {
      background-image: url('img/metal_helmet_male.png');
      filter: sepia(1) saturate(10) hue-rotate(5deg) brightness(1.2);
      /* Diadème doré */
  }

  .armor-cosmic-aura {
      background-image: url('img/cape_white.png');
      filter: hue-rotate(270deg) saturate(5) brightness(1.3) drop-shadow(0 0 5px #c56cf0);
      z-index: -1;
      /* Placé derrière le corps comme la cape */
  }

  /* ÉQUIPEMENT LÉGENDAIRE (Pourcentage) */
  .armor-amulet {
      background-image: url('img/steel.png');
      filter: hue-rotate(40deg) saturate(8) brightness(1.4) drop-shadow(0 0 8px #f9ca24);
      /* Amulet dorée brillante */
  }

  /* FRACTION → DÉCIMALE : bouclier cyan */
  .armor-frac-dec {
      background-image: url('img/spartan.png');
      filter: hue-rotate(160deg) saturate(6) brightness(1.3) drop-shadow(0 0 6px #00cec9);
  }

  /* FRACTION D'UNE QUANTITÉ : jambières émeraude */
  .armor-frac-quant {
      background-image: url('img/white_pants_male.png');
      filter: hue-rotate(120deg) saturate(8) brightness(1.3) drop-shadow(0 0 6px #00b894);
  }

  .hidden {
      display: block;
  }

  @keyframes walk-down {
      from {
          background-position: 0 -640px;
      }

      to {
          background-position: -576px -640px;
      }
  }

  @keyframes slash-down {
      from {
          background-position: 0px -896px;
      }

      to {
          background-position: -384px -896px;
      }


  }

  /* Quand le conteneur a la classe .attacking, on change l'animation de toutes les couches */
  #hero-container.attacking .hero-layer {
      animation: slash-down 0.4s steps(6) forwards !important;
  }

  @keyframes hurt {
      from {
          background-position: 0px -1280px;
      }

      to {
          background-position: -384px -1280px;
      }

      /* 6 frames de chute */
  }

  /* Quand le conteneur a la classe .hurt */
  #hero-container.hurt .hero-layer {
      animation: hurt 0.4s steps(6) forwards !important;
  }


  /* On s'assure que même invisible, l'armure suit l'animation si elle est débloquée */
  #hero-container.attacking .hero-layer.hidden {
      visibility: hidden;
  }



  body {
      font-family: 'Orbitron', sans-serif;
      background: radial-gradient(circle at center, #1a1a2e 0%, #050505 100%);
      color: white;
      height: 100vh;
      height: 100dvh;
      margin: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background 1.5s ease;
  }

  /* Le brouillard flou en arrière-plan 
  body::before {
      content: "";
      position: absolute;
      top: -10%;
      left: -10%;
      width: 120%;
      height: 120%;
      z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.2;
      filter: blur(8px);
      
      animation: drift 30s linear infinite alternate;
      pointer-events: none;
  }*/

  /* L'effet de distorsion qui sera piloté par JS */
  #game-container {
      width: 95%;
      max-width: 900px;
      box-sizing: border-box;
      text-align: center;
      position: relative;
      z-index: 10;
      background: rgba(0, 0, 0, 0.5);
      background: rgba(0, 0, 0, 0.85);
      /* backdrop-filter: blur(10px);*/
      border: 2px solid var(--main-color);
      border-radius: 20px;
      padding: 40px;
      /* On applique le filtre de distorsion ici */
      /*  filter: url(#distort);
      transition: filter 0.3s ease;*/
  }

  @keyframes drift {
      from {
          transform: rotate(0deg) scale(1);
      }

      to {
          transform: rotate(5deg) scale(1.1);
      }
  }


  @keyframes smoke-drift {
      from {
          transform: scale(1.2) translate(0, 0);
      }

      to {
          transform: scale(1.5) translate(-5%, -5%);
      }
  }

  #level-up {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2rem;
      color: gold;
      font-weight: bold;
      text-shadow: 0 0 15px orange;
      z-index: 100;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s, transform 0.5s;
      white-space: nowrap;
  }

  .show-level {
      opacity: 1 !important;
      transform: translate(-50%, -80%) !important;
  }



  .rain {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      /* Utilisation d'une texture de pluie plus visible */
      background: url('stardust.png');
      opacity: 0.5;
      z-index: 1;
      animation: rain-fall 2s linear infinite;
  }

  @keyframes rain-fall {
      from {
          background-position: 0 0;
      }

      to {
          background-position: -100vh 100vw;
      }
  }

  /* L'éclair (caché par défaut) */
  #eclair {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 99;
      background: white;
      opacity: 0;
  }

  /* Animation de l'éclair déclenchée par JS */
  .flash-active {
      animation: flash-anim 0.7s ease-out;
  }

  @keyframes flash-anim {
      0% {
          opacity: 0;
      }

      10% {
          opacity: 0.8;
      }

      15% {
          opacity: 0.2;
      }

      20% {
          opacity: 0.9;
      }

      100% {
          opacity: 0;
      }
  }



  #timer-bar {
      width: 100%;
      height: 30px;
      background: #222;
      border-radius: 15px;
      margin-bottom: 30px;
      border: 2px solid #444;
      overflow: hidden;
      position: relative;
  }

  @keyframes pulse-red {
      0% {
          box-shadow: 0 0 10px var(--danger-color);
      }

      50% {
          box-shadow: 0 0 30px var(--danger-color);
      }

      100% {
          box-shadow: 0 0 10px var(--danger-color);
      }
  }

  @keyframes pulse-blue {
      0% {
          box-shadow: 0 0 10px var(--main-color);
      }

      50% {
          box-shadow: 0 0 30px var(--main-color);
      }

      100% {
          box-shadow: 0 0 10px var(--main-color);
      }
  }

  #progress {
      width: 100%;
      height: 100%;
      background: var(--main-color);
      box-shadow: 0 0 15px var(--main-color);
      transition: width 0.2s ease-out;
  }

  #timer-text {
      position: absolute;
      width: 100%;

      top: 50%;
      left: 0;
      transform: translateY(-50%);

      font-size: 1.2rem;
      font-weight: bold;
      color: white;
      text-shadow: 1px 1px 3px black;
      z-index: 2;
  }

  #question {
      font-size: 6rem;
      font-weight: bold;
      margin-bottom: 20px;
      text-shadow: 0 0 20px var(--main-color);
      letter-spacing: -2px;
  }

  #reponse {
      font-size: 3.5rem;
      background: rgba(255, 255, 255, 0.05);
      border: 3px solid #333;
      color: white;
      text-align: center;
      width: 250px;
      padding: 15px;
      border-radius: 15px;
      outline: none;
      transition: 0.2s;
      touch-action: manipulation;
  }

  #reponse:focus {
      border-color: var(--main-color);
      box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  }

  .correct {
      border-color: #2ed573 !important;
      box-shadow: 0 0 40px #2ed573 !important;
  }

  .wrong {
      border-color: var(--danger-color) !important;
      box-shadow: 0 0 40px var(--danger-color) !important;
  }

  #score-board {
      font-size: 1.2rem;
      margin: 0 auto 10px auto;
      color: #aaa;
      text-transform: uppercase;
      letter-spacing: 2px;
  }

  .shake {
      animation: shake 0.3s;
  }

  @keyframes shake {
      0%,
      100% {
          translate: 0 0;
      }
      25% {
          translate: -10px 0;
      }
      75% {
          translate: 10px 0;
      }
  }

  button {
      padding: 20px 40px;
      font-size: 1.5rem;
      cursor: pointer;
      background: transparent;
      border: 2px solid var(--main-color);
      color: var(--main-color);
      border-radius: 50px;
      text-transform: uppercase;
      font-weight: bold;
      transition: 0.3s;
  }

  button:hover {
      background: var(--main-color);
      color: #000;
      box-shadow: 0 0 30px var(--main-color);
  }

  .fin-buttons-container {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-top: 15px;
      width: 100%;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
      flex-shrink: 0;
  }

  .button-secondary {
      padding: 10px 25px;
      font-size: 1rem;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.05);
      border: 2px solid #3498db;
      color: #3498db;
      border-radius: 50px;
      text-transform: uppercase;
      font-weight: bold;
      transition: 0.3s;
      text-decoration: none;
      display: inline-block;
      margin-top: 15px;
      letter-spacing: 1px;
  }

  .button-secondary:hover {
      background: #3498db;
      color: #000;
      box-shadow: 0 0 20px #3498db;
  }

  .hidden {
      display: none;
  }

  #fin-titre {
      text-shadow: 0 0 20px var(--danger-color);
      margin-bottom: 5px;
  }

  #final-score {
      text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  }

  #btn-envoyer {
      display: none;
      /* Masqué par défaut */
      background-color: #ffa502;
      color: black;
      border: none;
      margin-bottom: 10px;
      width: 100%;
  }

  @media (max-width: 600px) {
      #question {
          font-size: 4rem;
          /* Un peu plus petit sur mobile */
          margin-bottom: 10px;
      }

      #answer {
          font-size: 2.5rem;
          width: 180px;
      }

      #level-up {
          font-size: 1.5rem;
          /* Réduit la taille pour mobile */
      }
  }

  /* L'animation "Malédiction" : légère rotation, zoom et décalage */
  @keyframes cursed-shake {
      0%, 100% {
          translate: 0 0;
          rotate: 0deg;
      }
      25% {
          translate: 2px 2px;
          rotate: 1deg;
      }
      50% {
          translate: -2px 1px;
          rotate: -1deg;
      }
      75% {
          translate: 0 -2px;
          rotate: 0.5deg;
      }
  }

  /* La classe qu'on activera via Javascript */
  .malediction-active #game-container {
      animation: cursed-shake 4s infinite ease-in-out;
      /* Petit bonus "glitch" : séparation des couleurs sur le texte pour faire mal aux yeux */
      text-shadow: 2px 0 var(--danger-color), -2px 0 blue;
  }

  /* --- OPTIMISATION CRITIQUE MOBILE --- */
  @media (max-width: 768px) {

      /* 1. On désactive le brouillard animé (Tueur de batterie) */
      body::before {
          display: none !important;
          /* On cache complètement le brouillard */
      }

      /* 2. On désactive le flou effet "verre" (Tueur de FPS) et on réduit les marges/paddings */
      #game-container {
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
          background: rgba(0, 0, 0, 0.9);
          padding: 15px !important; /* Réduction du padding sur mobile */
          width: 100vw !important;
          height: 100vh !important;
          height: 100dvh !important; /* Dynamic Viewport Height */
          max-width: none !important;
          margin: 0 !important;
          border: none !important;
          border-radius: 0 !important;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: center; /* Centre le contenu verticalement dans le plein écran */
          overflow: hidden !important; /* Verrouille le défilement général */
      }

      /* 3. Réduction de taille et ajustement hauteur pour l'écran de bilan */
      #fin-ecran {
          display: flex !important;
          flex-direction: column !important;
          height: 100% !important;
          max-height: 100% !important; /* Empêche le débordement hors du conteneur parent */
          width: 100% !important;
          flex-grow: 1 !important;
          box-sizing: border-box !important;
          justify-content: space-between !important;
          margin: 0 !important;
          min-height: 0 !important; /* Permet aux enfants de se réduire si nécessaire */
          overflow: hidden !important; /* Empêche le débordement */
      }

      #fin-ecran.hidden {
          display: none !important;
      }

      .fin-header-container {
          gap: 15px !important;
          margin-bottom: 10px !important;
      }

      .fin-text-container {
          text-align: left !important;
      }

      #fin-titre {
          font-size: 1.6rem !important;
          margin-bottom: 8px !important;
      }
      
      #fin-ecran p {
          font-size: 1rem !important;
          margin-bottom: 10px !important;
      }

      #fin-ecran div {
          font-size: 1.4rem !important;
      }

      .fin-buttons-container {
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: nowrap !important;
          gap: 8px !important;
          justify-content: center !important;
          width: 100% !important;
          margin-top: 10px !important;
          flex-shrink: 0 !important; /* Empêche les boutons de se ratatiner à 0px de haut */
      }

      .fin-buttons-container button {
          padding: 8px 10px !important;
          font-size: 0.75rem !important;
          white-space: nowrap !important;
          flex: 1 1 0% !important;
          min-width: 0 !important;
          max-width: 150px !important;
          border-radius: 25px !important; /* Bordures un peu plus resserrées pour le petit format */
      }

      /* 4. On désactive l'ombre portée sur le bouton au survol */
      button:hover {
          box-shadow: none !important;
          background: var(--main-color);
      }
  }

  /* --- GESTION DU CLAVIER (UNIQUEMENT SUR MOBILE) --- */
  @media (max-width: 768px) {

      /* Le décalage ne s'active que si l'écran est petit (téléphone) */
      body.clavier-ouvert {
          justify-content: flex-start !important;
          /* Force l'alignement en haut */
          padding-top: 6px !important;
          /* On contraint le body à la hauteur RÉELLEMENT visible
             (mesurée en JS via visualViewport), pas à 100vh qui inclut
             la zone couverte par le clavier. Ça empêche tout scroll
             nécessaire pour "aller voir" le haut du contenu. */
          height: var(--vh-clavier, 100vh) !important;
          min-height: 0;
          max-height: var(--vh-clavier, 100vh);
          overflow: hidden;
      }

      body.clavier-ouvert #game-container {
          margin-top: 0 !important;
          margin-bottom: 0 !important;
          max-height: calc(var(--vh-clavier, 100vh) - 12px);
          overflow-y: auto;
          /* On laisse le contenu se réduire plutôt que déborder */
          display: flex;
          flex-direction: column;
          scale: 0.85;
          transform-origin: top center;
      }

      /* On réduit un peu les espaces pour que tout rentre */
      body.clavier-ouvert #timer-bar {
          margin-bottom: 5px;
      }

      body.clavier-ouvert #question {
          margin-top: 5px;
          margin-bottom: 5px;
      }
  }

  /* --- HISTORIQUE DES CALCULS (NOUVEAU STYLE) --- */
  #history-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto 20px auto;
      max-height: 250px; /* Limite de hauteur globale pour tout le journal */
      overflow-y: auto;   /* Rend le journal entier défilable */
      padding-right: 5px; /* Évite le chevauchement avec la scrollbar */
      box-sizing: border-box;
  }

  #history-list {
      /* Transformation en Grille/Tableau */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 10px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid #444;
      border-radius: 10px;
  }

  /* La carte individuelle d'un calcul */
  .history-item {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 8px;
      transition: transform 0.2s;
  }

  .history-item:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.1);
  }

  /* La Rune (le signe opératoire) */
  .rune-icon {
      font-size: 2rem;
      font-weight: bold;
      margin-right: 12px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.3);
      text-shadow: 0 0 10px currentColor;
      flex-shrink: 0;
  }

  .rune-icon.long-text {
      font-size: 1.1rem;
  }

  /* Couleurs des Runes demandées */
  .rune-entier {
      color: #2ed573;
      /* Vert */
      border: 1px solid #2ed573;
  }

  .rune-decimal {
      color: #ffa502;
      /* Orange */
      border: 1px solid #ffa502;
  }

  .rune-legendaire {
      color: #eccc68;
      /* Doré */
      border: 1px solid #eccc68;
      text-shadow: 0 0 10px #ffa502;
  }

  /* Le détail du calcul */
  .history-details {
      display: flex;
      flex-direction: column;
      font-family: monospace;
      font-size: 0.95rem;
      text-align: left;
      width: 100%;
  }

  .calc-question {
      color: #eee;
      margin-bottom: 2px;
  }

  .calc-result {
      font-weight: bold;
  }

  /* Résultat correct/faux texte */
  .res-correct {
      color: #2ed573;
  }

  .res-wrong {
      color: var(--danger-color);
  }

  /* --- STATISTIQUES DE FIN DE PARTIE --- */
  .history-stats {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 15px;
      font-family: 'Orbitron', sans-serif;
  }

  .stat-badge {
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 1rem;
      font-weight: bold;
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }

  .stat-success {
      background: rgba(46, 213, 115, 0.15);
      color: #2ed573;
      border-color: #2ed573;
  }

  .stat-fail {
      background: rgba(255, 71, 87, 0.15);
      color: #ff4757;
      border-color: #ff4757;
  }








  /* --- STATISTIQUES DÉTAILLÉES (NOUVEAU) --- */
  .stats-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 20px;
  }

  .stat-card {
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid #444;
      border-radius: 8px;
      padding: 6px 6px;
      display: flex;
      align-items: center;
      min-width: 140px;
  }

  /* La petite rune dans la carte de stat */
  .stat-rune {
      font-size: 1em;
      font-weight: bold;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-right: 10px;
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 0 5px currentColor;
  }

  .stat-rune.long-text {
      font-size: 0.9rem;
  }

  /* Texte des scores dans la carte */
  .stat-info {
      display: flex;
      flex-direction: column;
      font-size: 0.85rem;
      text-align: left;
      line-height: 1.3;
  }

  .stat-purified {
      color: #2ed573;
  }

  /* Vert */
  .stat-broken {
      color: #ff4757;
  }

  /* Rouge */

  /* Rappel des couleurs de runes */
  .rune-entier {
      color: #2ed573;
      border: 1px solid #2ed573;
  }

  .rune-decimal {
      color: #ffa502;
      border: 1px solid #ffa502;
  }

  .rune-legendaire {
      color: #eccc68;
      border: 1px solid #eccc68;
      text-shadow: 0 0 10px #ffa502;
  }

  /* --- ARMOR INVENTORY & HERO DASHBOARD --- */
  .hero-dashboard {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin: 10px auto 20px auto;
  }

  .armor-columns-wrapper {
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: stretch;
  }

  .armor-inventory-column {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      max-height: 245px; /* Limite à 1.5 fois la hauteur du personnage (160px * 1.5) */
      gap: 6px;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 6px;
      box-sizing: border-box;
  }

  .armor-slot {
      position: relative;
      width: 44px;
      height: 52px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 3px;
      box-sizing: border-box;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: help;
  }

  .armor-slot:hover {
      border-color: var(--main-color);
      background: rgba(255, 255, 255, 0.08);
  }

  .armor-slot.locked .armor-icon {
      filter: grayscale(100%) opacity(35%);
  }

  .armor-slot.unlocked {
      border-color: gold;
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
      background: rgba(255, 215, 0, 0.08);
  }

  .armor-slot.unlocked .armor-icon {
      filter: none;
      animation: item-glow 1.5s ease-in-out infinite alternate;
  }

  @keyframes item-glow {
      from {
          filter: drop-shadow(0 0 1px rgba(255, 215, 0, 0.3));
      }

      to {
          filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
      }
  }

  .armor-icon-wrapper {
      width: 32px;
      height: 32px;
      overflow: hidden;
      position: relative;
      margin-top: 2px;
  }

  .armor-icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 64px;
      height: 64px;
      background-repeat: no-repeat;
      background-size: 832px 1344px;
      background-position: 0px -640px;
      image-rendering: pixelated;
      transform: scale(0.5);
      transform-origin: top left;
  }

  .icon-torso {
      background-image: url('img/chest_male.png');
  }

  .icon-legs {
      background-image: url('img/white_pants_male.png');
  }

  .icon-weapon {
      background-image: url('img/longsword_alt.png');
  }

  .icon-feet {
      background-image: url('img/brown_shoes_male.png');
  }

  .icon-head {
      background-image: url('img/metal_helmet_male.png');
  }

  .icon-cape {
      background-image: url('img/cape_white.png');
  }

  .icon-weapon-glow {
      background-image: url('img/steel.png');
  }

  .icon-shield {
      background-image: url('img/spartan.png');
  }

  .icon-diadem {
      background-image: url('img/metal_helmet_male.png');
      filter: sepia(1) saturate(10) hue-rotate(5deg) brightness(1.2);
  }

  .icon-cosmic-aura {
      background-image: url('img/cape_white.png');
      filter: hue-rotate(270deg) saturate(5) brightness(1.3) drop-shadow(0 0 5px #c56cf0);
  }

  .icon-amulet {
      background-color: #a370f7;
      clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%);
      /* Une forme de gemme/pendentif */
  }

  .icon-frac-dec {
      background-image: url('img/spartan.png');
      filter: hue-rotate(160deg) saturate(6) brightness(1.3);
  }

  .icon-frac-quant {
      background-color: #00b894;
      clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
      /* Forme hexagonale émeraude */
  }

  .operator-badge {
      position: absolute;
      top: 2px;
      right: 4px;
      font-size: 0.65rem;
      font-weight: 900;
      line-height: 1;
      text-shadow: 1px 1px 2px black;
  }

  .operator-badge.entier {
      color: #2ed573;
  }

  .operator-badge.decimal {
      color: #ffa502;
  }

  .operator-badge.legendaire {
      color: #eccc68;
      text-shadow: 0 0 3px #ffa502, 1px 1px 2px black;
  }

  .armor-progress-container {
      width: 100%;
      height: 3px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 1.5px;
      overflow: hidden;
  }

  .armor-progress-bar {
      height: 100%;
      width: 0%;
      background: var(--main-color);
      transition: width 0.3s ease;
  }

  .armor-slot.unlocked .armor-progress-bar {
      background: #2ed573;
  }

  .armor-counter {
      font-size: 0.55rem;
      color: #888;
      line-height: 1;
      margin-top: 1px;
  }

  .armor-slot.unlocked .armor-counter {
      color: gold;
      font-weight: bold;
  }

  /* --- RESPONSIVE & MOBILE OPTIMIZATIONS --- */
  @media (max-width: 768px) {
      .hero-dashboard {
          flex-direction: column-reverse; /* Héros au-dessus, inventaire en dessous */
          align-items: center;
          justify-content: center;
          gap: 12px;
          margin: 5px auto 10px auto;
          width: 100%;
      }

      #hero-container {
          transform: scale(2);
          margin: 0;
          flex-shrink: 0;
      }

      #hero-bilan {
          transform: scale(1.6) !important;
          margin: 0 !important;
      }

      #hero-bilan-placeholder {
          width: 100px !important;
          height: 100px !important;
      }

      .armor-inventory-column {
          display: flex;
          flex-direction: row; /* Alignement horizontal sur mobile */
          flex-wrap: wrap;
          justify-content: center;
          max-height: none; /* Pas de limite verticale car on s'étend horizontalement */
          gap: 6px;
          padding: 6px;
          width: 100%;
          box-sizing: border-box;
      }

      #history-container {
          flex-grow: 1 !important;
          max-height: none !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch !important; /* Défilement fluide et forcé sur iOS */
          min-height: 0 !important;
          margin-bottom: 10px !important;
      }

      .armor-slot {
          width: 38px;
          height: 46px;
          padding: 2px;
      }

      .armor-icon-wrapper {
          width: 24px;
          height: 24px;
      }

      .armor-icon {
          transform: scale(0.375);
      }

      .armor-counter {
          font-size: 0.5rem;
      }

      .operator-badge {
          font-size: 0.55rem;
          top: 1px;
          right: 2px;
      }
  }

  /* --- KEYBOARD OPENED (MOBILE) --- */
  @media (max-width: 768px) {
      body.clavier-ouvert .hero-dashboard {
          flex-direction: row !important; /* Revenir côte à côte en horizontal pour économiser de la hauteur */
          margin: 2px auto !important;
          gap: 10px !important;
          flex-shrink: 0;
      }

      body.clavier-ouvert #hero-container {
          transform: scale(1.3) !important;
          flex-shrink: 0;
      }

      body.clavier-ouvert .armor-inventory-column {
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: wrap !important;
          max-height: none !important;
          gap: 3px;
          padding: 3px;
          width: auto !important;
      }

      body.clavier-ouvert .armor-slot {
          width: 34px;
          height: 40px;
      }

      body.clavier-ouvert .armor-icon-wrapper {
          width: 20px;
          height: 20px;
      }

      body.clavier-ouvert .armor-icon {
          transform: scale(0.3125);
      }

      body.clavier-ouvert .armor-counter {
          display: none;
      }
  }

  /* --- MENU DE SELECTION DES NIVEAUX --- */
  .level-menu-container {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px dashed rgba(197, 108, 240, 0.3);
      width: 100%;
  }

  .level-menu-title {
      font-size: 1.1rem;
      color: #a370f7;
      margin-top: 0;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      text-shadow: 0 0 8px rgba(163, 112, 247, 0.4);
  }

  .level-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 10px;
      width: 100%;
      box-sizing: border-box;
  }

  @media (max-width: 768px) {
      .level-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
      }
  }

  @media (max-width: 480px) {
      .level-grid {
          grid-template-columns: 1fr;
          gap: 12px;
      }
  }

  .level-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 15px 5px;
      text-decoration: none;
      color: #e0e0e0;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      min-height: 120px;
  }

  .level-card:hover {
      transform: translateY(-4px);
      color: white;
  }

  .level-badge {
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 4px;
      transition: transform 0.3s ease;
      font-family: 'Orbitron', sans-serif;
  }

  .level-card:hover .level-badge {
      transform: scale(1.1);
  }

  .level-name {
      font-size: 0.75rem;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
  }

  .level-desc {
      font-size: 0.65rem;
      color: #888;
      line-height: 1.3;
      transition: color 0.3s ease;
      text-align: center;
      padding: 0 4px;
  }

  .level-card:hover .level-desc {
      color: #ccc;
  }

  /* Thèmes de couleur spécifiques */
  .level-6e {
      border-color: rgba(46, 213, 115, 0.2);
  }

  .level-6e .level-badge,
  .level-6e .level-name {
      color: #2ed573;
      text-shadow: 0 0 10px rgba(46, 213, 115, 0.3);
  }

  .level-6e:hover {
      border-color: #2ed573;
      box-shadow: 0 5px 15px rgba(46, 213, 115, 0.15), 0 0 10px rgba(46, 213, 115, 0.2);
      background: rgba(46, 213, 115, 0.04);
  }

  .level-5e {
      border-color: rgba(52, 152, 219, 0.2);
  }

  .level-5e .level-badge,
  .level-5e .level-name {
      color: #3498db;
      text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
  }

  .level-5e:hover {
      border-color: #3498db;
      box-shadow: 0 5px 15px rgba(52, 152, 219, 0.15), 0 0 10px rgba(52, 152, 219, 0.2);
      background: rgba(52, 152, 219, 0.04);
  }

  .level-4e {
      border-color: rgba(236, 204, 104, 0.2);
  }

  .level-4e .level-badge,
  .level-4e .level-name {
      color: #eccc68;
      text-shadow: 0 0 10px rgba(236, 204, 104, 0.3);
  }

  .level-4e:hover {
      border-color: #eccc68;
      box-shadow: 0 5px 15px rgba(236, 204, 104, 0.15), 0 0 10px rgba(236, 204, 104, 0.2);
      background: rgba(236, 204, 104, 0.04);
  }

  .level-3e {
      border-color: rgba(255, 71, 87, 0.2);
  }

  .level-3e .level-badge,
  .level-3e .level-name {
      color: #ff4757;
      text-shadow: 0 0 10px rgba(255, 71, 87, 0.3);
  }

  .level-3e:hover {
      border-color: #ff4757;
      box-shadow: 0 5px 15px rgba(255, 71, 87, 0.15), 0 0 10px rgba(255, 71, 87, 0.2);
      background: rgba(255, 71, 87, 0.04);
  }